<template id="goods-select">
	<el-card class="box-card" style="box-shadow:none">
		<div class="search-box">
			<el-form :inline="true" :model="searchForm" class="demo-form-inline" style="margin-top: 20px;">
				<el-form-item>
					<el-button-group>
						<el-button :class="{'primary': searchForm.tab_type == 2}" @click="checkTab(2)">销售中</el-button>
						<el-button :class="{'primary': searchForm.tab_type == 3}" @click="checkTab(3)">仓库中</el-button>
						<el-button :class="{'primary': searchForm.tab_type == 4}" @click="checkTab(4)">预警中</el-button>
						<el-button :class="{'primary': searchForm.tab_type == 5}" @click="checkTab(5)">回收站中</el-button>
					</el-button-group>
				</el-form-item>
				<el-form-item label="商品名称">
					<el-input v-model="searchForm.name" placeholder="" clearable></el-input>
				</el-form-item>
				<el-form-item label="商品类型">
					<el-select v-model="searchForm.type" clearable>
						<el-option label="普通商品" value="1" />
						<el-option label="虚拟商品" value="2" />
						<el-option label="卡密商品" value="3" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit" icon="el-icon-search" >查询</el-button>
					<el-button type="danger" @click="selectGoods">确定选择</el-button>
					<el-button @click="closeDialog">关闭</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-table
			:data="tableData"
			@row-click="singleElection"
			highlight-current-row
			:row-style="{ height: '57px'}"
			style="width: 100%;font-size: 12px">
			<el-table-column width="55" label="选择">
				<template #default="scope">
					<el-radio class="radio" v-model="templateSelection" :label="scope.row.id">&nbsp;</el-radio>
				</template>
			</el-table-column>
			<el-table-column
				prop="id"
				label="商品ID"
				width="75">
			</el-table-column>
			<el-table-column
				label="商品图"
				width="100">
				<template #default="scope">
					<img :src="scope.row.pic" width="36px" height="36px"/>
				</template>
			</el-table-column>
			<el-table-column
				prop="name"
				label="商品名称">
			</el-table-column>
			<el-table-column
				prop="cate"
				label="商品分类"
				width="200">
			</el-table-column>
			<el-table-column
				prop="price"
				label="商品售价"
				width="100">
			</el-table-column>
			<el-table-column
				prop="sales"
				label="销量"
				width="100">
			</el-table-column>
			<el-table-column
				prop="stock"
				label="库存"
				width="100">
			</el-table-column>
			<el-table-column
				label="状态"
				width="100">
				<template #default="scope">
					<el-tag type="success" v-if="scope.row.is_show == 1">上架</el-tag>
					<el-tag type="danger" v-if="scope.row.is_show == 2">下架</el-tag>
				</template>
			</el-table-column>
		</el-table>
		<div class="page-div" style="margin-top: 20px">
			<el-pagination
				background
				layout="->, prev, pager, next"
				:page-size="searchForm.limit"
				@current-change="pageChangeHandle"
				:total="page.total">
			</el-pagination>
		</div>
	</el-card>
</template>

<script>
export default {
	data() {
		return {
			searchForm: {
				cate_id: 0,
				tab_type: 2,
				name: '',
				type: '',
				page: 1,
				limit: 10
			},
			page: {
				total: 0
			},
			tableData: [],
			selectedGoods: [],
			templateSelection: "",
		}
	},
	mounted() {
		this.getList();
	},
	methods: {
		onSubmit() {
			this.searchForm.page = 1
			this.getList()
		},
		// 选择状态
		checkTab(type) {
			this.searchForm.tab_type = type
			this.getList()
		},
		// 单选
		singleElection(row) {
			this.templateSelection = row.id
			this.selectedGoods = this.tableData.filter((item) => item.id === row.id)
		},
		handleSelectionChange(val) {
			this.selectedGoods = [];
			val.forEach(item => {
				this.selectedGoods.push(item)
			})
		},
		// 翻页
		pageChangeHandle(page) {
			this.searchForm.page = page
			this.getList()
		},
		async getList() {
			let res = await this.$API.goods.list.get(this.searchForm)
			this.tableData = res.data.list.data
			this.tableData.map(item => {
				item.pic = JSON.parse(item.slider_image)[0]
				return item
			})
			this.page.total = res.data.list.total
		},
		selectGoods() {
			if (this.selectedGoods.length == 0) {
				this.$message.error('请选择要使用的商品')
				return false
			}
			let selectedGoods = JSON.parse(JSON.stringify(this.selectedGoods))
			this.selectedGoods = []
			this.templateSelection = ''
			this.$emit('selected-goods', selectedGoods)
		},
		closeDialog() {
			this.$emit('close-dialog')
		}
	}
}
</script>
